<template>
	<view class="my_userinfo">
		<view class="my_userinfo-box">
			<!-- 头像区 -->
			<view class="userinfo-img">
				<view class="userinfo-img-content">
					<image :src="userinfo.avatarUrl" class="user-img"></image>
					<view class="user-name">{{userinfo.nickName}}</view>
				</view>
			</view>

			<!-- 下列面板区域 -->
			<view class="panel-list">
				<!-- 第一个面板 -->
				<view class="panel1">
					<view class="panel1-body">
						<view class="panel1-item">
							<text>8</text>
							<text>收藏的店铺</text>
						</view>
						<view class="panel1-item">
							<text>14</text>
							<text>收藏的商品</text>
						</view>
						<view class="panel1-item">
							<text>18</text>
							<text>关注的商品</text>
						</view>
						<view class="panel1-item">
							<text>84</text>
							<text>足迹</text>
						</view>
					</view>
				</view>
				<!-- 第二个面板 -->
				<view class="panel2">
					<view class="panel2-text">
						我的订单
					</view>
					<view class="panel2-body">
						<view class="panel2-item">
							<image class="icon" src="/static/my-icons/icon1.png"></image>
							<text>待付款</text>
						</view>
						<view class="panel2-item">
							<image class="icon" src="/static/my-icons/icon2.png"></image>
							<text>待收货</text>
						</view>
						<view class="panel2-item">
							<image class="icon" src="/static/my-icons/icon3.png"></image>
							<text>退款/退货</text>
						</view>
						<view class="panel2-item">
							<image class="icon" src="/static/my-icons/icon4.png"></image>
							<text>全部订单</text>
						</view>
					</view>
				</view>
				<!-- 第三个面板 -->
				<view class="panel3">
					<view class="panel3-body">
						<view class="panel3-item">
							<text>收货地址</text>
							<uni-icons type="arrowright"></uni-icons>
						</view>
						<view class="panel3-item">
							<text>联系客服</text>
							<uni-icons type="arrowright"></uni-icons>
						</view>
						<view class="panel3-item" @click="backLogin">
							<text>退出登录</text>
							<uni-icons type="arrowright"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		name: "my_userinfo",
		data() {
			return {

			};
		},

		computed: {
			...mapState('m_user', ['userinfo'])
		},

		methods: {
			...mapMutations('m_user', ['updateUserinfo', 'updateToken', 'updateAddress']),
			
			async backLogin() {
				const [err, succ] = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗?'
				}).catch(err => err)
				
				  if (succ && succ.confirm) {
				     // 用户确认了退出登录的操作
				     // 需要清空 vuex 中的 userinfo、token 和 address
				     this.updateUserinfo({})
				     this.updateToken('')
				     this.updateAddress({})
				  }
			}
		}
	}
</script>

<style lang="scss">
	.userinfo-img {
		position: relative;
		height: 430rpx;
		background-color: #007AFF;

		.user-img {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
		}

		.user-name {
			color: #fff;
			padding: 10px;
			text-align: center;
		}

		.userinfo-img-content {
			position: absolute;
			top: 50%;
			left: 50%;
			display: flex;
			flex-direction: column;
			transform: translate(-50%, -50%);
		}
	}

	.panel-list {
		padding: 0 10px;
	}

	.panel1 {
		position: relative;
		top: -10px;
		background-color: #fff;
		padding: 10px 0;

		.panel1-body {
			display: flex;
			justify-content: space-around;
			font-size: 13px;

			.panel1-item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}

	.panel2 {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		margin-bottom: 10px;

		.panel2-text {
			padding: 10px 10px;
			border-bottom: 1px solid #f5f5f5;
		}

		.panel2-body {
			display: flex;
			justify-content: space-around;
			padding-top: 10px;

			.panel2-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 13px;
			}

			.icon {
				height: 35px;
				width: 35px;
			}
		}
	}

	.panel3 {
		background-color: #fff;

		.panel3-body {


			.panel3-item {
				padding: 15px 15px;
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>
